<template>
  <el-form
    ref="addForm"
    :model="addForm"
    label-width="120px"
    class="m-l-40"
    label-position="left"
  >
    <el-form-item label="活动名称">
      <el-input
        type="input"
        v-model="addForm.couponName"
        size="small"
        placeholder="请输入活动名称"
      />
    </el-form-item>
    <el-form-item label="面值">
      <el-input
        type="input"
        v-model="addForm.couponAmount"
        size="small"
        placeholder="请输入券面值"
        ><template slot="append">元</template></el-input
      >
    </el-form-item>
    <el-form-item label="使用门槛">
      <el-input
        type="input"
        v-model="addForm.couponOrderAmount"
        size="small"
        placeholder="请输入使用门槛金额"
        ><template slot="append">元</template></el-input
      >
    </el-form-item>
    <el-form-item label="活动时间">
      <el-date-picker
        size="small"
        class="w-100"
        v-model="settingDate"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="领取方式">
      <el-radio-group v-model="addForm.drawType">
        <el-radio label="0">加注成功后领取</el-radio>
        <el-radio label="1">无需加注即可领取</el-radio>
      </el-radio-group>
      <div class="flex-start">
        <span style="width: 120px">用户最低加注</span
        ><el-input
          class="w-50"
          type="input"
          v-model="addForm.minimumFill"
          size="small"
          placeholder="请输入使加注金额"
          ><template slot="append">元</template></el-input
        >
      </div>
    </el-form-item>
    <el-form-item label="选择可用加注机">
      <el-radio-group v-model="addForm.isAll">
        <el-radio label="1">全部加注机</el-radio>
        <el-radio label="0">部分加注机 </el-radio>
      </el-radio-group>
      <el-button
        style="margin-left: 10px"
        type="text"
        @click="chooseMachine"
        v-if="!selectedMachine.length"
        >选择加注机</el-button
      >
      <el-button
        style="margin-left: 10px"
        type="text"
        @click="chooseMachine"
        v-if="selectedMachine.length"
        >查看加注机（{{ selectedMachine.length }}台）</el-button
      >
      <!--      <select-filling-machine-text-button @change="machineChange">-->
      <!--      </select-filling-machine-text-button>-->
    </el-form-item>
    <el-form-item label="券有效天数">
      <el-input
        class="w-50"
        type="input"
        v-model="addForm.validityDays"
        size="small"
        placeholder="请输入券有效天数"
        ><template slot="append">天</template></el-input
      >
    </el-form-item>
    <el-form-item label="发行数量">
      <el-input
        class="w-50"
        type="input"
        v-model="addForm.dispatchNum"
        size="small"
        placeholder="请输入券发行总量"
      ></el-input>
    </el-form-item>
    <el-form-item label="每人限领">
      <el-input
        class="w-50"
        type="input"
        v-model="addForm.couponLimit"
        size="small"
        placeholder="请输入券每人限领数量"
      ></el-input>
    </el-form-item>
    <div class="c-red f-s-14">
      说明： <br />1、活动时间：即可以领取优惠券的时间
      <br />2、无需加注即可领取：用户进入小程序后即可通过弹窗领取优惠券
      <br />3、券有效天数：指优惠券领取时间起算多少天内有效
      <br />4、发行数量和每人限领只针对“无需加注即可领取”的条件下有效
    </div>
    <div class="m-t-20 m-b-20"></div>
    <div>
      <el-button type="primary" size="small" plain @click="back"
        >取消</el-button
      >
      <el-button type="primary" size="small" @click="saveCoupon"
        >确定</el-button
      >
    </div>
  </el-form>
</template>
<script>
import { save } from "@/api/marketing-management/apostle-rebate";
import SelectFillingMachineTextButton from "@/components/business/select-filling-machine-text-button.vue";
import {
  confirmWarning,
  isListEmpty,
  isStringEmpty,
  msgError,
  msgSuccess,
} from "@/util/common-util";

export default {
  components: { SelectFillingMachineTextButton },
  data() {
    return {
      addForm: {
        isAll: "1",
      },
      settingDate: "",
    };
  },
  props: {
    selectedMachine: {
      type: Array,
    },
  },
  methods: {
    chooseMachine() {
      this.$emit("openMachineChange");
    },
    saveCoupon() {
      if (isStringEmpty(this.addForm.couponName)) {
        msgError("请填写活动名称");
        return;
      }
      if (isStringEmpty(this.addForm.couponAmount)) {
        msgError("请填写面值");
        return;
      }
      if (isListEmpty(this.settingDate)) {
        this.addForm.startTime = "";
        this.addForm.endTime = "";
      } else {
        this.addForm.beginTime = this.settingDate[0];
        this.addForm.endTime = this.settingDate[1];
      }

      if (this.selectedMachine.length && !this.addForm.isAll) {
        msgError("请先选择加注机");
        return;
      }
      this.$set(
        this.addForm,
        "machineIds",
        this.selectedMachine.map((item) => item.id).join(",")
      );
      console.log(this.settingDate);
      save(this.addForm)
        .then((res) => {
          msgSuccess("提交成功");
          this.$emit("saveRefresh");
        })
        .catch((err) => {});
    },
    back() {
      this.$emit("closeAddDialog");
    },
  },
};
</script>
<style lang="scss">
.ant-modal div[aria-hidden="true"] {
  display: none !important;
}
</style>
